* Buttons *
***********/
+// stuff for .needs-attention
+$_dot_color: if($variant=='light', $selected_bg_color,
+ lighten($selected_bg_color,15%));
@keyframes needs_attention {
from {
//background-size: 0 0, 0 0;
background-image: -gtk-gradient(radial,
center center, 0,
center center, 0.01,
- to($selected_bg_color),
+ to($_dot_color),
to(transparent));
}
to {
}
}
+
.button {
border-radius: 3px;
transition: all 200ms ease-out;
&.needs-attention > GtkLabel,
&.needs-attention > GtkImage {
animation: needs_attention 150ms ease-in;
+ $_dot_shadow: _text_shadow_color();
+ $_dot_shadow_r: if($variant=='light',0.5,0.45);
background-image: -gtk-gradient(radial,
center center, 0,
center center, 0.5,
- to($selected_bg_color),
+ to($_dot_color),
to(transparent)),
-gtk-gradient(radial,
center center, 0,
- center center, 0.5,
- to(white),
+ center center, $_dot_shadow_r,
+ to($_dot_shadow),
to(transparent));
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
- background-position: right 3px, right 4px;
+ @if $variant == 'light' { background-position: right 3px, right 4px; }
+ @else { background-position: right 3px, right 2px; }
&:backdrop { background-size: 6px 6px, 0 0;}
}
&.needs-attention:active > GtkLabel,
@function _border_color ($c) { @return darken($c,25%); } // colored buttons want the border form the base color
+@function _text_shadow_color ($tc:$fg_color, $bg:$bg_color) {
+//
+// calculate the color of text shadows
+//
+// $tc is the text color
+// $bg is the background color
+//
+ $_lbg: lightness($bg)/100%;
+ @if lightness($tc)<50% { @return transparentize(white,1-$_lbg/($_lbg*1.3)); }
+ @else { @return transparentize(black,$_lbg*0.8); }
+}
+
@mixin _button_text_shadow ($tc:$fg_color, $bg:$bg_color) {
//
// helper function for the text emboss effect
// TODO: this functions needs a way to deal with special cases
//
- $_lbg: lightness($bg)/100%;
-
- $_dark: transparentize(black,$_lbg*0.8);
- $_bright: transparentize(white,1-$_lbg/($_lbg*1.3));
+ $_shadow: _text_shadow_color($tc, $bg);
- @if lightness($tc) < 50% {
- text-shadow: 0 1px $_bright;
- icon-shadow: 0 1px $_bright;
+ @if lightness($tc)<50% {
+ text-shadow: 0 1px $_shadow;
+ icon-shadow: 0 1px $_shadow;
}
@else {
- text-shadow: 0 -1px $_dark;
- icon-shadow: 0 -1px $_dark;
+ text-shadow: 0 -1px $_shadow;
+ icon-shadow: 0 -1px $_shadow;
}
}
***********/
@keyframes needs_attention {
from {
- background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#215d9c), to(transparent)); }
+ background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#3583d5), to(transparent)); }
to {
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#215d9c), to(transparent)); } }
padding: 3px 6px; }
.stack-switcher > .button.needs-attention > GtkLabel, .stack-switcher > .button.needs-attention > GtkImage {
animation: needs_attention 150ms ease-in;
- background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#215d9c), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(white), to(transparent));
+ background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#3583d5), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.45, to(rgba(0, 0, 0, 0.81176)), to(transparent));
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
- background-position: right 3px, right 4px; }
+ background-position: right 3px, right 2px; }
.stack-switcher > .button.needs-attention > GtkLabel:backdrop, .stack-switcher > .button.needs-attention > GtkImage:backdrop {
background-size: 6px 6px, 0 0; }
.stack-switcher > .button.needs-attention:active > GtkLabel, .stack-switcher > .button.needs-attention:active > GtkImage {
padding: 3px 6px; }
.stack-switcher > .button.needs-attention > GtkLabel, .stack-switcher > .button.needs-attention > GtkImage {
animation: needs_attention 150ms ease-in;
- background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#4a90d9), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(white), to(transparent));
+ background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#4a90d9), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.76923)), to(transparent));
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
background-position: right 3px, right 4px; }